<script setup lang="ts">
import { ref, watch } from 'vue';
// 导入 channel store
import { useChannelStore } from '../store/channel'
import axios from 'axios';
import type { ArticleItem, ArticleResData } from '../types/data';


// 创建store实例
const channelStore = useChannelStore()

// 定义props
// const props = defineProps<{
//   channelId: number;
// }>();

// 文章列表响应数据
const articles = ref<ArticleItem[]>([]);

// 获取文章列表数据
watch(
  () => channelStore.channelId, // 检测id的变化
  async () => {
    // id一变化重新获取数据
    console.log('获取数据', channelStore.channelId);
    const res = await axios.get<ArticleResData>(
      'http://geek.itheima.net/v1_0/articles',
      {
        params: { channel_id: channelStore.channelId, timestamp: Date.now() },
      }
    );
    console.log(res);
    // 赋值给页面
    articles.value = res.data.data.results;
  },
  { immediate: true } // 组件第一次加载完毕，也要获取数据
);
</script>

<template>
  <div class="article-list">
    <div class="article-item" v-for="item in articles" :key="item.art_id">
      <p class="title">
        {{ item.title }}
      </p>
      <img
        v-for="(img, i) in item.cover.images"
        class="img"
        :src="img"
        :key="i"
        alt=""
      />

      <div class="info">
        <span>{{ item.aut_name }}</span>
        <span>{{ item.comm_count }}评论</span>
        <span>{{ item.pubdate }}</span>
      </div>
    </div>
  </div>
</template>
